<template>
  <div class="walletWrap">
    <div class="wallet-balance">
      <div class="avatar-box"><img :src="userUrl?userUrl:require('./avatar.png')" class="avatar" onclick="return false"></div>
      <span class="nickname" v-text="userName"></span>
      <div class="balance">
        <div class="balance-txt">账户余额</div>
        <div class="balance-money" v-if="showBalance"><span v-text="money"></span><span>元</span></div>
        <div class="balance-start" v-else>
          <div class="start">***</div>
          元
        </div>
      </div>
    </div>
    <div class="wallet-withdraw" @click="deposit"></div>
    <div class="wallet-bill" @click="queryBill"></div>
    <div class="wallet-ad"></div>

    <!--微信绑定手机号-->
    <v-phone v-model="showModal" @bindPhone="bindCustomerPhone"></v-phone>

    <v-dialog v-model="modalVal" content="您还未绑定工资卡，请先绑定再提现" cancelText="取消" confirmText="去绑定" @confirm="bindPage"
              @cancel="cancel"></v-dialog>
  </div>
</template>

<script>
  import phone from "../../components/phone"
  import {getUrlKey, getSessionStore, setSessionStore, toDecimal, setStore} from "../../config/util"
  import {Base64} from 'js-base64'
  import {baseUrl} from "../../config/env"
  import Cookies from 'js-cookie'
  import dialog from "../../components/dialog"

  export default {
    name: "wallet",
    data() {
      return {
        showBalance: false,
        openid: "",
        userName: "",
        userUrl: "",
        countentPhone: "",
        showModal: false,
        userSign: "",
        money: "",
        modalVal: false
      }
    },
    mounted() {
      this.openid = getUrlKey("openid"); //微信openid
      this.userName = getUrlKey("userName"); //用户昵称
      this.userUrl = getUrlKey("userUrl"); //用户头像
      this.countentPhone = getUrlKey("countentPhone"); //手机框 0弹出1不弹出

      if (this.openid != "" && this.openid != "null" && this.openid != null) {
        setSessionStore("openid", Base64.encode(this.openid));
      }
      if (this.userName != "" && this.userName != "null" && this.userName != null) {
        this.userName = decodeURI(this.userName);
        setSessionStore("weixin_userName", this.userName);
      }
      if (this.userUrl != "" && this.userUrl != "null" && this.userUrl != null) {
        setSessionStore("weixin_userUrl", this.userUrl);
      }

      this.userSign = Base64.decode(getSessionStore("openid"));
      if (this.countentPhone == "0") {
        this.showModal = true;
      } else {
        //获取个人资料
        this.$vux.loading.show({
          text: '加载中',
        })
        this.axios.get(baseUrl + "/userMaterial/select?sgin=" + this.userSign).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            this.money = toDecimal(resultObj.data.money);//余额
            this.showBalance = true;
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
        this.userUrl = getSessionStore("weixin_userUrl");
        this.userName = getSessionStore("weixin_userName");
      }
    },
    methods: {
      bindCustomerPhone(phone) {//绑定微信客户手机号
        this.$vux.loading.show({
          text: '加载中',
        })
        //绑定微信手机
        this.axios.get(baseUrl + "/wx_user/set_phone?sgin=" + this.userSign + "&phone=" + phone + "&userName=" + this.userName + "&userUrl=" + this.userUrl).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data == 1) {
            //查询个人资料
            this.axios.get(baseUrl + "/userMaterial/select?sgin=" + this.userSign).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0 && resultObj.data != null) {
                this.money = toDecimal(resultObj.data.money);//余额
                this.showBalance = true;
              } else {
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          } else {
            this.showModal = true;
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      deposit() {//提现
        let weixin_withdraw_sign = localStorage.getItem("weixin_withdraw_sign"); //判断不同的用户
        if (Base64.decode(getSessionStore("openid"))) {
          sessionStorage.setItem("wallet_sign", "001166");
          setStore("weixin_withdraw_sign", getSessionStore("openid")); //验证不同用户登录后提现密码次数的问题
          if (getSessionStore("openid") != weixin_withdraw_sign) { //不是当前用户清除十分钟次数和cookie的时间
            localStorage.removeItem("sess_time_local");
            Cookies.set('sess_time_local', "", {expires: -1, path: ''});
          }
          //查询是否有银行卡，没有跳转绑定银行卡页面，有直接到提现页面
          this.axios.get(baseUrl + "/billrecord/query_bankcardwithDraw?sgin=" + this.userSign).then((res) => {
            let resultObj = res.data;
            if (resultObj.code == 0 && resultObj.data != null) {
              if (resultObj.data.type == 1) { //没有绑定银行卡
                this.modalVal = true;
              } else {
                sessionStorage.setItem("with_bankname", resultObj.data.bankName);
                sessionStorage.setItem("with_banknumber", resultObj.data.bankNumber);
                sessionStorage.setItem("with_cardtype", resultObj.data.cardType);
                sessionStorage.setItem("reserved_phone", resultObj.data.phone);
                sessionStorage.setItem("with_charge", toDecimal(resultObj.data.chargeMoney));
                sessionStorage.setItem("with_chargetip", resultObj.data.remark);

                this.$router.push({path: '/deposit'});
              }
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          });
        }
      },
      queryBill() {//账单
        if (Base64.decode(getSessionStore("openid"))) {
          this.$router.push("/bill");
        }
      },
      cancel() {
        this.modalVal = false;
      },
      bindPage() {//添加工资卡
        sessionStorage.setItem("wallet_sign", "001166");
        this.modalVal = false;
        this.$router.push("/bindcard");
      }
    },
    watch: {},
    components: {
      "v-phone": phone,
      "v-dialog": dialog
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../assets/stylus/mixin.styl";

  .walletWrap
    wh(100%, 100%);
    overflow: hidden;
    .wallet-balance
      bg-image("./bg.png", 100%, 5.04rem);
      width: 100%;
      height: 5.04rem;
      margin-bottom: 0.133rem;
      overflow: hidden;
      .avatar-box
        fj(center, center);
        margin-top: 0.533rem;
        margin-bottom: 0.28rem;
        .avatar
          wh(1.947rem, 1.947rem);
          border-radius(50%);
      .nickname
        display: flex;
        justify-content: center;
        size-color(0.453rem, rgba(255, 255, 255, 1));
      .balance
        display: flex;
        justify-content: space-between;
        margin-top: 0.52rem;
        size-color(0.453rem, rgba(255, 255, 255, 1));
        .balance-txt
          margin-left: 0.6rem;
        .balance-money
          margin-right: 0.6rem;
        .balance-start
          display: flex;
          align-items: center;
          margin-right: 0.6rem;
          .start
            padding-top: 0.15rem;
    .wallet-withdraw
      bg-image("./withdraw.png", 100%, 3.067rem);
      width: 100%;
      height: 3.066666rem;
    .wallet-bill
      bg-image("./bill.png", 100%, 3.067rem);
      width: 100%;
      height: 3.066666rem;
    .wallet-ad
      background: url(./ad.jpg) no-repeat center center;
      background-size: 100% 100%;
      width: 100%;
      height: 3.5rem;
</style>
